import PropTypes from 'prop-types';
import PureRenderMixin from "react-addons-pure-render-mixin"
import React, {Component} from 'react';
import D3Chart from '../D3Chart'
import d3 from './d3';
import './bar.scss';
import T from 'utils/T';


@T.decorator.propTypes({
    data: PropTypes.array,
    option: PropTypes.object
})
export default class Bar extends D3Chart {
    setDefaultOptions(){
        return {
            width: 400,
            height: 400,
            left:30,
            right:30,
            top:20,
            bottom:30,
            rectPadding: 4
        }
    }

    /**
     * 标准化数据格式
     */
    normalize() {
        const dataInit = this.props.data;
        this.xData = [];
        this.yData = [];
        this.data = dataInit.map(item => {
            this.xData.push(item.x);
            this.yData.push(item.value);
            return item;
        });
    }

    drawChart(){

        const options = this.getOptions();
        //在 wrapper 里添加一个 SVG 画布
        this.chart = d3.select(this.wrapper)     //选择文档中的wrapper元素
            .append('svg')          //添加一个svg元素
            .attr('width', '100%')       //设定宽度
            .attr('height', options.height)    //设定高度
            .style('border', '1px solid #ccc');
        //画布周边的空白
        let padding = {left:options.left, right:options.right, top:options.top, bottom:options.bottom};

        //x轴的比例尺
        let xScale = d3.scaleBand()
            .domain(this.xData)
            .range([0, options.width - padding.left - padding.right])

        //y轴的比例尺
        let yScale = d3.scaleLinear()
            .domain([0, d3.max(this.yData)])
            .range([options.height - padding.top - padding.bottom, 0]);

        //定义x轴
        let xAxis = d3.axisBottom()
            .scale(xScale)

        //定义y轴
        let yAxis = d3.axisLeft()
            .scale(yScale)

        //矩形之间的空白
        let rectPadding = options.rectPadding;

        //添加矩形元素
        let rects = this.chart.selectAll(".MyRect")
            .data(this.data)
            .enter()
            .append("rect")
            .attr("class","MyRect")
            .attr("transform","translate(" + padding.left + "," + padding.top + ")")
            .attr("x", function(d,i){
                return xScale(d.x) + rectPadding/2;
            })
            .attr("width", xScale.bandwidth() - rectPadding )
            .attr("y",function(d){
                var min = yScale.range()[0];
                return min;
            })
            .attr("height",function(d){
                return 0;
            })
            .transition()
            .delay(function(d,i){
                return i * 200;
            })
            .duration(2000)
            .attr("y",function(d){
                return yScale(d.value);
            })
            .attr("height", function(d){
                return options.height - padding.top - padding.bottom - yScale(d.value);
            })
        //添加文字元素
        let texts = this.chart.selectAll(".MyText")
            .data(this.data)
            .enter()
            .append("text")
            .attr("class","MyText")
            .attr("transform","translate(" + padding.left + "," + padding.top + ")")
            .attr("x", function(d,i){
                return xScale(d.x) + rectPadding/2;
            } )
            .attr("dx",function(){
                return xScale.bandwidth()/2;
            })
            .attr("dy",function(d){
                return 20;
            })
            .text(function(d){
                return d.value;
            })
            .attr("y",function(d){
                return yScale.range()[0];
            })
            .transition()
            .delay(function (d, i) {
                return 200*i
            })
            .duration(2000)
            // .ease("bounce")
            .attr("y",function(d){
                return yScale(d.value);
            })




        //添加x轴
        this.chart.append("g")
            .attr("class","axis")
            .attr("transform","translate(" + padding.left + "," + (options.height - padding.bottom) + ")")
            .call(xAxis);

        //添加y轴
        this.chart.append("g")
            .attr("class","axis")
            .attr("transform","translate(" + padding.left + "," + padding.top + ")")
            .call(yAxis);
    }
}
